<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">

      <el-form :inline="true" :model="searchParam" class="demo-form-inline">
        <el-form-item label="商品名称：">
          <el-input
            v-model="searchParam.prodName"
            size="mini"
            placeholder="商品名称模糊查询"
          />
        </el-form-item>
        <el-form-item label="寄售状态：">
          <el-select v-model="searchParam.status"  size="mini" placeholder="请选择" clearable>
            <el-option label="开启" value="2" />
            <el-option label="关闭" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="searchParam.createTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="getPage()"
          >查询</el-button>
          <el-button
            size="mini"
            icon="el-icon-refresh"
            @click="() => {this.searchParam = {}, this.pageQuery = {pageSize: 10,pageNum: 1}, this.getPage()}"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <el-button size="mini" icon="el-icon-plus" type="primary" class="filter-item" @click="addOrUpdateHandle()">创建</el-button>
      <el-button size="mini" icon="el-icon-delete" type="danger" class="filter-item" @click="deleteHandle()">删除</el-button>
    </div>

    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="pageVO.list"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      style="width: 100%;"
    >
      <el-table-column
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column label="商品名称" prop="prodName" align="center">
        <template slot-scope="{row}">
          <span>{{ row.prodName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最低价（元）" prop="lowPrice" align="center">
        <template slot-scope="{row}">
          <span>{{(row.lowPrice / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高价（元）" prop="highPrice" align="center">
        <template slot-scope="{row}">
          <span>{{(row.highPrice / 100).toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流通量" prop="circulateNum" align="center">
        <template slot-scope="{row}">
          <span>{{row.circulateNum }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="发行方费率%" prop="issuerRate" align="center">
        <template slot-scope="{row}">
          <span>{{ row.issuerRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平台费率%" prop="platformRate" align="center">
        <template slot-scope="{row}">
          <span>{{ row.platformRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算周期（天）" prop="settleDays" align="center">
        <template slot-scope="{row}">
          <span>{{ row.settleDays }}</span>
        </template>
      </el-table-column>-->
      <!-- 创建时间 -->
      <el-table-column label="创建时间" prop="createTime" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="寄售状态" prop="status" align="center">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value=2
            :inactive-value=1
            active-text="开启"
            inactive-text="关闭"
            @change='enableOrDisable(row.id, row.status)'>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="text" @click="addOrUpdateHandle(row.id)">
            编辑
          </el-button>
<!--          <el-button type="text" @click="addOrUpdateHandle(row.id)">-->
<!--            详情-->
<!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
<!--    <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum" :limit.sync="pageQuery.pageSize" @pagination="getPage()" />-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageQuery.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageQuery.pageSize"
      :total="pageVO.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getPage()" />
  </div>
</template>

<script>
import AddOrUpdate from './add-or-update.vue'

export default {
  name: '',
  components: { AddOrUpdate },
  data() {
    return {
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1
      },
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0 // 一共多少页
      },
      // loading
      pageLoading: true,
      // 查询参数
      searchParam: {},
      ids: [],
      addOrUpdateVisible: false
    }
  },
  mounted() {
    this.getPage()
  },
  methods: {

    handleSizeChange (val) {
      this.pageQuery.pageSize = val
      this.getPage()
    },
    handleCurrentChange (val) {
      this.pageQuery.pageNum = val
      this.getPage()
    },
    getPage() {
      this.pageLoading = true
      this.$http({
        url: this.$http.adornUrl('/admin/consign/prod/page'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({...this.pageQuery, ...this.searchParam}
          )
        )
      }).then(({data}) => {
        this.pageLoading = false
        this.pageVO.list = data.list
        this.pageVO.total = data.total
      })
    },
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    deleteHandle() {
      if (this.ids.length === 0) {
        this.$message({
          message: '请选择要删除的寄售商品',
          type: 'error',
          duration: 1200
        })
        return
      }
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.deleteByIds())
    },
    deleteByIds() {
      this.$http({
        url: this.$http.adornUrl(`/admin/consign/prod`),
        method: 'delete',
        data: this.$http.adornData({
          ids:this.ids
        })
      }).then(({ data }) => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
          onClose: () => this.getPage()
        })
      })
    },
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id)
    },

    /**
     * 开启/关闭
     */
    enableOrDisable(id, sts) {
      var prodObj = {}
      prodObj.id = id
      prodObj.status = sts
      this.$confirm(sts === 2 ? '是否确认开启该商品寄售?' : '是否确认关闭该商品寄售?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/admin/consign/prod/updateStatus'),
          method: 'put',
          data: this.$http.adornData(prodObj)
        }).then(({ data }) => {
          if (data) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => this.getPage()
            })
          }
        })
      }).catch(() => { this.getPage() })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .brand-logo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 200px;
  }
}
</style>
